<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>结算卡</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
	<link rel="stylesheet" href="../../../css/common.css" media="all">
	<style type="text/css">
		td .layui-table-cell {
			text-align: center;
			height: 100px;
			white-space: normal;
		}

		.layui-table img,
		.layui-table video {
			width: 50px;
			max-width: 60px;
		}

		td .layui-table-cell {
			text-align: center;
			height: auto;
			white-space: normal;
		}

		.tDiv {
			font-size: 10px;
			line-height: 13px;
		}

		.tDiv-price {
			font-size: 15px;
			line-height: 18px;
		}
	</style>

</head>

<body>
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">结算卡信息</div>
					<!-- <div class="layui-card-header">
							<button class="layui-btn layui-btn-danger layui-btn-sm" id="del">删除</button>
						</div> -->
					<div class="layui-card-body">
						<!-- 搜索 -->
						<form class="layui-form search" id="form" onsubmit="return false" action="##">
							<div class="layui-inline search_inline">
								<label class="layui-form-label">时间段：</label>
								<div class="layui-input-inline" style="width: 300px;">
									<input class="layui-input" id="choosetime" placeholder="时间段" autocomplete="off"
										value="">
									<input class="layui-input" type="text" id="starttime" value="" name="starttime"
										placeholder="" autocomplete="off" style="display: none;">
									<input class="layui-input" type="text" id="endtime" value="" name="endtime"
										placeholder="" autocomplete="off" style="display: none;">
								</div>
							</div>
							<div class="layui-inline search_inline">
								<label class="layui-form-label">会员ID：</label>
								<div class="layui-input-inline">
									<input class="layui-input" name="member_id"
										placeholder="会员ID" autocomplete="off">
								</div>
							</div>
							
							<div class="layui-inline search_inline">
								<label class="layui-form-label">证件号：</label>
								<div class="layui-input-inline">
									<input class="layui-input" lay-verify="cert_no" name="cert_no" placeholder="身份证或营业执照"
										autocomplete="off">
								</div>
							</div>
							<div class="layui-inline search_inline">
								<label class="layui-form-label">姓名：</label>
								<div class="layui-input-inline">
									<input class="layui-input" lay-verify="card_name" name="card_name" placeholder="模糊搜索"
										autocomplete="off">
								</div>
							</div>
							<div class="layui-inline search_inline">
								<label class="layui-form-label">电话：</label>
								<div class="layui-input-inline">
									<input class="layui-input" lay-verify="mp" name="mp" placeholder="电话"
										autocomplete="off">
								</div>
							</div>
							<div class="layui-inline search_inline">
								<label class="layui-form-label">银行卡号：</label>
								<div class="layui-input-inline">
									<input class="layui-input" lay-verify="card_no" name="card_no" placeholder="银行卡号"
										autocomplete="off">
								</div>
							</div>
							<div class="layui-inline search_inline">
								<label class="layui-form-label">商户编号：</label>
								<div class="layui-input-inline">
									<input class="layui-input" lay-verify="mer_no" name="mer_no" placeholder="商户编号"
										autocomplete="off">
								</div>
							</div>
							<div class="layui-inline search_inline">
								<label class="layui-form-label">证件类型：</label>
								<div class="layui-input-inline">
									<select class="status_prorate" name="card_type">
										<option value="">全部</option>
										<option value="1">身份证</option>
										<option value="2">营业执照</option>
									</select>
								</div>
							</div>
							<button class="layui-btn search_inline" lay-submit="" lay-filter="search"
								data-type="reload" id="searchBtn">搜索</button>
							<button class="layui-btn layui-btn-primary search_inline" type="reset">重置</button>
						</form>
						<!-- 搜索 -->
						<table class="layui-hide" id="test-table-operate" lay-filter="test-table-operate"></table>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="../../../layuiadmin/layui/layui.js"></script>
	<script src="../../../js/common.js"></script>
	<script>
		layui.config({
			base: '../../../layuiadmin/' //静态资源所在路径
		}).extend({
			index: 'lib/index' //主入口模块
		}).use(['index', 'table', 'form', 'laydate'], function () {
			var table = layui.table,
				$ = layui.$,
				form = layui.form,
				laydate = layui.laydate,
				admin = layui.admin;
			laydate.render({
				elem: '#choosetime',
				type: 'datetime',
				range: true,
				value: '',  // 将默认日期设为空字符串
				done: function (value, date) {
					$('input[name=starttime]').val(value.split(' - ')[0]);
					$('input[name=endtime]').val(value.split(' - ')[1]);
				}
			});

			if ($('#choosetime').val() !== '') {   // 判断 value 参数是否为空字符串
				$("#starttime").val(getstartime());
				$("#endtime").val(getendtime());
				var _data = {
					starttime: $("#starttime").val(),
					endtime: $("#endtime").val(),
				};
			}
			initdata();
			function initdata() {
				table.render({
					elem: '#test-table-operate',
					url: server.sys_settle_card_query,
					height: 'full-200',
					cellMinWidth: cellMinWidth,
					limit: limit,
					limits: limits,
					cols: [
						[
							{
								field: 'sys_id',
								width: 160,
								title: '渠道号',
							}, {
								field: 'member_id',
								width: 160,
								title: '会员编号',
								event: 'member_id'					
							}, {
								field: 'card_name',
								width: 140,
								title: '名称',
								event: 'card_name'
							},  {
								field: 'mp',
								width: 120,
								title: '移动电话',
								event: 'mp'
							}, {
								field: 'card_type',
								width: 100,
								title: '证件类型',
								templet: function(d) {
									var cardTypeText = d.card_type == 1 ? '身份证' : '营业执照'
									return '<span class="text_blue_color">' + cardTypeText + '</span>'
								}
							}, {
								field: 'cert_no',
								width: 200,
								title: '证件号',
								event: 'cert_no'
							}, {
								field: 'cert_begin_date',
								width: 120,
								title: '证件开始日期',
							}, {
								field: 'cert_end_date',
								width: 120,
								title: '证件结束日期',
							}, {
								field: 'card_no',
								width: 180,
								title: '银行卡号',
								event: 'card_no'
							}, {
								field: 'token_no',
								width: 120,
								title: '卡序列号',
							}, {
								field: 'upper_mer_no',
								width: 170,
								title: '上层商户编号',
							}, {
								field: 'mer_no',
								width: 170,
								title: '商户编号',
								event: 'mer_no'
							}, {
								field: 'addtime',
								width: 170,
								title: '添加时间',
							}, {
								field: 'edittime',
								width: 170,
								title: '修改时间',
							},]
					],
					page: true,
					where: _data,
					request: {
						pageName: 'page',
						limitName: 'size' //每页数据量的参数名，默认：limit
					},
					parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
						return {
							"code": res.code, //解析接口状态
							"msg": res.msg, //解析提示文本
							"count": res.settle_card.pager.total, //解析数据长度
							"data": res.settle_card.data //解析数据列表
						};
					}
				});
			}

			//监听搜索
			form.on('submit(search)', function (data) {
				_data = data.field
				initdata();
				return false;
			});

			$("button[type=reset]").on("click", function () {
				_data = {}
				document.getElementById("form").reset();
				setTimeout(() => {
					$("#choosetime").val('')
					$("#starttime").val('')
					$("#endtime").val('')
					_data.starttime = $("#starttime").val()
					_data.endtime = $("#endtime").val()
					initdata();
				}, 100)
			});

			//监听表格复选框选择
			table.on('tool(test-table-operate)', function (obj) {
				console.log(obj)
				var key = obj.event
				var queryData = obj.data[key]
				$('input[name="' + key + '"]').val(queryData)
				//跳转页面绑定事件
				//$("#searchBtn").click()
			});

			function getstartime() {
				var today = new Date();
				var tYear = today.getFullYear();
				var tMonth = today.getMonth() + 1;
				var tDate = today.getDate();
				tMonth = doHandleMonth(tMonth)
				tDate = doHandleMonth(tDate)
				return tYear + "-" + tMonth + "-" + tDate + " 00:00:00";
			}
			function getendtime() {
				var today = new Date();
				var tYear = today.getFullYear();
				var tMonth = today.getMonth() + 1;
				var tDate = today.getDate();
				tMonth = doHandleMonth(tMonth)
				tDate = doHandleMonth(tDate)
				return tYear + "-" + tMonth + "-" + tDate + " 23:59:59";
			}
			function doHandleMonth(month) {
				var m = month;
				if (month.toString().length == 1) {
					m = "0" + month;
				}
				return m;
			}
		});
	</script>
</body>

</html>